<template>
  <div>
    <div class="login-container">
      <h2>用户登录</h2>
      <form action="#" method="post">
        <div class="form-group">
          <label for="username">账号</label>
          <input type="text" id="username" v-model="Users.Uname" name="username" />
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" id="password" v-model="Users.pwd" name="password" />
        </div>
        <el-button size="max" type="primary" @click="login">登入</el-button>
      </form>
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'


export default {
  data() {
    return {
      Users: {
        Uname: "admin",
        pwd: "123"
      }
    }
  },
  methods: {
    ...mapMutations(["SetUsers"]),
    login() {
      this.axios({
        method: "post",
        url: "Sign",
        params: {
          loginname: this.Users.Uname,
          loginpwd: this.Users.pwd
        }
      })
        .then(res => {
          if (res.data?.data?.Token) {
            this.$notify({
              title: '登录成功!',
              message: '这是一条成功的提示消息',
              type: 'success'
            });
            this.$store.commit("SetToken", res.data.data.Token);
            sessionStorage.setItem("token", res.data.data.Token); 
            sessionStorage.setItem("UserId", res.data.data.UserId)//保存用户ID
            sessionStorage.setItem("user",res.data.data)//用户信息
            console.log("用户数据",res.data.data);
            this.$router.push("/");
          }else{
			this.error({
			title: '登录失败! 请检查账号或密码',
			message: '这是一条失败的提示消息'
			});
			}
        })
        .catch(error => {
          console.error("登录失败:", error);
          this.$notify.error({
            title: '错误',
            message: '登录失败，请检查账户和密码'
          });
        });
    }
  }
}
</script>
<style>
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-container {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 300px;

}

.login-container {
  width: 300px;
  /* 设置表单容器的宽度，你可以根据需要调整 */
  margin: 0 auto;
  /* 上下边距为0，左右边距自动，实现水平居中 */
  margin-top: 100px;
  /* 可选，设置表单在垂直方向上的位置，你可以根据需要调整 */
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

input[type="submit"] {
  background-color: #4caf50;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
}

input[type="submit"]:hover {
  background-color: #45a049;
}
</style>
